<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ul+jquery实现下拉选择框</title>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .search-box {
            width: 325px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #2F889A;
            border-radius: 3px;
            margin: 0 auto;
        }

        .select-box {
            float: left;
            position: relative;
        }

        .search-box span {
            padding-left: 15px;
            width: 45px;
            display: block;
            background-color: #2F889A;
            color: #fff;
        }

        .search-box input {
            float: left;
            width: 155px;
            border: 0;
            height: 33px;
            line-height: 35px;
            outline: 0;
        }

        .search-box button {
            width: 85px;
            background: #2F889A;
            color: #fff;
            border: 0;
            outline: 0;
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            float: right;
        }

        .select-box ul {
            display: none;
            position: absolute;
            left: -1px;
            top: 33px;
            width: 59px;
            text-align: center;
            border: 1px solid #2F889A;
        }

        .select-box ul li {
            display: block;
            padding: 0 5px;
        }

        .change {
            background-color: #2F889A;
            color: #fff
        }
    </style>
    <script>
        $(function () {

            $(".select-box").hover(function () {
                $(this).children("ul").stop().show();
            }, function () {
                $(this).children("ul").stop().hide();
            });

            $(".select-box").children('ul').find("li:not(:last)")
                .mousemove(function () {
                    $(this).addClass('change').siblings('').removeClass('change');
                }).click(function () {
                $(this).parent().prev().text($(this).html());
                $(this).parent().css('display', 'none');
            });

        });
    </script>
</head>
<body>
<form class="search-box">
    <div class="select-box">
        <span>选择</span>
        <ul>
            <li>微博</li>
            <li>产品</li>
            <li>资讯</li>
            <li>推荐</li>
            <li>更多>></li>
        </ul>
    </div>
    <input type="text">
    <button>搜索</button>
</form>


<hr />
<style>
    .test{
        width: 50px;
        height: 200px;
        overflow: auto;
        float: left;
        margin: 5px;
        border: none;
    }
    .scrollbar{
        width: 30px;
        height: 300px;
        margin: 0 auto;

    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>
<div class="test test-1">
    <div class="scrollbar">
        <p>dkdkkdkd</p>
        <p>dkdkdddddddddddddddddddddddddddddddddddddddddkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
        <p>dkdkkdkd</p>
    </div>
</div>
</body>
</html>




















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>Title</title>
</head>
<body>
hello world!

</body>
<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于
        index = new WebSocket("ws://192.168.2.121/ws");
        //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
        //打开事件
        index.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        index.onmessage = function(msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        index.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        index.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }
</script>
</html>


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
        '<foreignObject width="100%" height="100%">' +
        '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
        '<em>I</em> like ' +
        '<span style="color:white; text-shadow:0 0 2px blue;">' +
        'cheese</span>' +
        '</div>' +
        '</foreignObject>' +
        '</svg>';
    var DOMURL = window.URL || window.webkitURL || window;
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    }
    img.src = url;
</script>
</body>
</html>

https://yq.aliyun.com/articles/606424
https://www.cnblogs.com/xinchenhui/p/10886140.html

<br />

<style>

    .uploadImgBtn {

        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        background: red no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top:0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    /*这是一个用做回显的盒子的样式*/
      .pic{
          width: 100px;
          height: 100px;
      }
    .pic img {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div class="uploadImgBtn" id="uploadImgBtn">
    <input class="uploadImg" type="file" name="file" multiple id="file">
</div>
</body>
